*{
    margin: 0;
    padding: 0;
    border: 0;
}
.top{
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: 15px;
    background-color: white;
}


.page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

html,body{
    width: 100%;
    height: 100%;
}

.top-title{
    display: flex;
    flex-direction: row;
    width: 100%;

}

.top_text{
    font-weight: bold;
    text-align: center;
    width: 800px;
    font-size: 2.5em;
    line-height: 110px;
}

.top_img{
    flex: 1;
    width: 50px;
    height: 50px;
    margin: 30px;
}

.find{
    position: relative;
    display: flex;
    height: 80px;
    margin: 35px;
    background-color: rgb(246,247,248);
    border-radius: 50px
}

.find_img{
    padding: 20px;
    position: absolute;
    width: 40px;
    height: 40px;
    left: 30px;
}

.find_text{
    position: absolute;
    left: 110px;
    margin: 10px;
    height: 60px;
    border: 0;
    font-size: 2em;
    background-color: rgb(246,247,248);
    color: rgb(168, 168, 172);
    outline: none;
}

.tabs{
    /*padding: 0px 0px 0px 40px;*/
    margin-left: 60px;
    margin-right: 60px;
    padding: 0;
}

.tab_list{
    display: flex;
    padding: 0;
}

.tab-item{
    list-style: none;
    text-align: left;
    justify-content: center;
    align-items: center;
    margin: 0px 100px 23px 0px;
    font-size: 27px;
    width: 164px;
    color: rgb(151,157,166);
}

.tab-botton{
    border-bottom: 1px solid rgb(222, 222, 222);
    margin-left: 60px;
    margin-right: 60px;
    padding: 0;
}
.tabs-top{

}

.tabs-long{
    width: 187px;
    margin-right: 69px;
}

.tab-item-hot{
    color: rgb(28,136,237);
}

.list{
    position: relative;
    width: 100%;
    flex: 1;
    overflow: auto;
    padding: 20px 0 20px 0;
    flex-direction: column;
}

.book{
    display: flex;
    text-decoration: none;
    padding: 15px;
    background-color: #fff;
    margin-bottom: 15px;
    /*position: relative;*/
}

.book-num{
    width: 80px;
    height: 270px;
    line-height: 274px;
    text-align: center;
    font-size: 3em;
}

.book-intro{
    height: 270px;
    width: 550px;
    display: flex;
    flex-direction: column;
}

.book-cover{

}

.reading-img{
    width: 180px;
    height: 270px;
}

.reading{
    width: 70px;
    height: 20px;
    padding: 5px;
    display: flex;
    border-radius: 50px;
    background-color: rgb(243,243,246);
}

.book-title,.book-author,.book-rating{
    /*height: 90px;*/
    /*line-height: 90px;*/
    text-align: left;
    padding-left: 30px;
}

.book-title{
    margin-top: 15px;
    padding-bottom: 5px;
    font-size: 40px;
    font-weight: bolder;
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
    /*overflow: hidden;*/
}
.book-author{
    margin-top: 20px;
    flex: 1;
    font-size: 40px;
    font-weight: 400;
    color: rgb(130,135,144);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.book-rating{
    flex: 1;
    font-size: 40px;
    font-weight: 500;
    color: rgb(154,160,171);
    display: flex;
}

.readingcountimg{
    width: 20px;
    height: 20px;
    margin-left: 10px;
}
.readingcount{
    color: rgb(154,160,171);
    margin-left: 5px;
}

.num{
    line-height: 65px;
    margin-right: 10px;
}

.img-hprc{
    height: 65px;
}